<template>
  <div class=" animate__animated animate__fadeInLeft">
    <div style="display: flex; justify-content: center;">
      <div style="margin-left: 5px">
        <el-input style="width: 400px;" suffix-icon="el-icon-search" placeholder="请输入搜索内容" v-model="key"></el-input>
        <el-button type="success" style="margin-left: 5px" @click="search()">搜索</el-button>
        <el-button type="danger" style="margin-left: 5px" @click="clear()">清空</el-button>
      </div>
    </div>

    <div class="container ">

      <div class="type-list">
        <div class="type-item" :class="{'type-item-active' :item.courseTypeName===currentName}"
             v-for="item in typeList" :key="item.id" @click="selectType(item.courseTypeName, item.id)">
          {{ item.courseTypeName }}
        </div>
      </div>
      <hr>
      <div class="course-list">


        <div class="course-card" v-for="course in courseList" :key="course.id" @click="openDetailPage(course.id)">
          <h3 class="course-name">{{ course.courseName }}</h3> <!-- 将课程名称添加在最左侧 -->
          <div class="course-info">
            <img :src="course.courseHover" alt="Course Cover" class="course-cover">
            <hr/>
            <span class="courseTypeName">{{ course.courseTypeName }}</span> <!-- 将课程价格添加在最右侧 -->
          </div>
        </div>

        <div v-if="code===400 || this.courseList.length===0" class="no-data">
          <div>
            <img src="@/assets/images/course.png" alt="">
          </div>
          <h1>还没有对应的课程哦,敬请等待哦!</h1>
        </div>

        <!-- 分页插件容器 -->
        <div class="pagination-container" v-if="code===200">
          <el-pagination
              big
              background
              :key="paginationKey"

              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :total="total"
              :current-page="currentPage"
              :page-size="size"
              class="mt-4"
          />
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "LayoutMain",
  data() {
    return {
      typeList: [],
      courseList: [],
      currentName: '全部',
      currentPage: 1,
      size: 6,
      total: 0,
      paginationKey: 0,
      key: '',
      sentence: '',
      greeting: '',
      advice: '',
      currenTypeId: 0,
      code: 0
    }
  },
  created() {
    this.getCourseTypeList()
    this.getCourseList()
  },
  mounted() {
    localStorage.setItem('activeMenu', "course")
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val; // 确保更新 currentPage 的值
      if (this.currentName === '全部') {
        this.getCourseList();
      } else {
        this.getCourseByType(); // 现在会使用更新后的 currentPage 请求数据
      }


    },
    selectType(typeName, id) {
      this.currentPage = 1; // 重置页数为第一页
      this.paginationKey += 1; // 增加 key 的值来强制重新渲染分页组件
      this.currenTypeId = id;
      if (typeName === '全部') {
        this.getCourseList()
      } else {
        this.getCourseByType()
      }
      this.currentName = typeName
    },
    handleSizeChange(val) {
      this.size = val
      this.currentPage = 1
      if (this.currentName === '全部') {
        this.getCourseList()
      } else {
        this.getQuestionByType()
      }

    },
    getCourseTypeList() {
      this.request.get('/course/coursetype/findCourseTypeList')
          .then(res => {
            this.typeList=res.courseTypeList
            this.typeList.unshift({courseTypeName: '全部'})
          })
    },
    getCourseList() {
      this.request.get('course/course/list', {
        params: {
          page: this.currentPage,
          limit: this.size,
          key: this.key
        }
      })
          .then(res => {

            if (res.code===200){
              this.total = res.page.totalCount
              this.courseList = res.page.list
            }else if (res.code===400){
              this.courseList=[]
            }
            this.code = res.code
          })
    },
    getCourseByType(){
      this.request.get('course/course/findCourseListByType/' + `${this.currentPage}` + "/" + `${this.size}` + "/" + this.currenTypeId)
          .then(res => {
            this.code = res.code
            this.total = res.count
            this.courseList = res.courseVoList
          })
    },
    search(){
      this.currentName = '全部'; // 将类型选中为全部
      this.currentPage = 1; // 重置页数为第一页
      this.paginationKey += 1; // 增加 key 的值来强制重新渲染分页组件=1
      this.getCourseList()
    },
    clear(){
      this.key=''
    },
    openDetailPage(id) {
      this.$router.push(`/courseDetail/${id}`);
    }
  }
}
</script>


<style scoped>
.container {
  background-color: #FFFFFF;
  width: 1400px;
  height: 850px;
  margin-top: 10px;
  margin-left: 130px;
}

.type-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.type-item {
  padding: 8px 16px;
  margin-top: 5px;
  margin-left: 5px;
  cursor: pointer;
}

.type-item-active {
  background-color: #007bff;
  border-radius: 5px;
  color: white;
}

.course-cover {
  width: 100%;
  height: 200px; /* 设置课程封面高度 */
  object-fit: cover;
  border-radius: 8px 8px 0 0; /* 圆角设置 */
}

.course-card {
  width: calc(25% - 10px); /* 每行显示四个，设置宽度为四分之一，并考虑间距 */
  margin-right: 20px; /* 添加右边距，控制卡片之间的间距 */
  margin-bottom: 10px; /* 调整课程卡片底部的间距 */
  padding: 15px;
  margin-left: 60px;
  margin-top: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #f9f9f9;
  display: inline-block; /* 设置为行内块级元素，实现横向排列 */
  vertical-align: top; /* 垂直对齐方式，顶部对齐 */
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
  position: relative; /* 相对定位，用于定位课程价格 */
}

.course-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 悬停时添加阴影效果 */
  transform: translateY(-5px); /* 悬停时向上移动5像素 */
}

.course-card h3 {
  margin-top: 10px;
  margin-bottom: 5px; /* 调整课程名称距离卡片底部的距离 */
}

.course-card p {
  margin: 5px 0;
}
.pagination-container {
  display: flex;
  justify-content: center;
}

.course-price {
  float: right;
  padding: 3px 6px;
  background-color: #ff1a1a;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
}

.courseTypeName{
  display: inline-block;
  padding: 5px 10px;
  background-color: orange;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
}

.free-price {
  background-color: #4CAF50; /* 设置绿色背景 */
}
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: 24px;
  color: #666;
  margin-top: 200px;
}

</style>